<template>
  <div>
<!--    <el-button @click="startAlarm">播放</el-button>-->
    <audio ref="audio" src="@/assets/alarm.mp3"></audio>
    <div style="margin: 10px">
      <div style="float: left; margin-bottom: 15px">
        单位 <el-cascader
            style="margin-left: 10px; margin-right: 20px; width: 255px"
            placeholder="请选择单位"
            ref="dwref"
            v-model="dwid"
            @change=""
            :options="dwoptions"
            :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'dwname', value:'id', emitPath: false }"
            clearable>
        </el-cascader>
        报警点 <el-input style="width: 200px; margin: 0 10px 0 10px" placeholder="报警点" suffix-icon="el-icon-search"
                  v-model="bjd"/>
        报警类型 <el-select style="margin-left: 10px; margin-right: 10px" v-model="bjlx" clearable placeholder="报警类型" filterable
                   >
          <el-option
              label="油井"
              value="油井">
          </el-option>
        </el-select>
        报警描述 <el-input style="width: 200px; margin: 0 10px 0 10px" placeholder="报警描述" suffix-icon="el-icon-search"
                         v-model="msxx"/>
<!--        <div style=" margin-top: 10px">-->
<!--          起止时间 <el-date-picker-->
<!--            style="margin-left: 10px"-->
<!--              v-model="datearr"-->
<!--              type="datetimerange"-->
<!--              value-format = "yyyy-MM-dd HH:mm:ss"-->
<!--              :picker-options="pickerOptions"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始日期"-->
<!--              end-placeholder="结束日期"-->
<!--              align="right">-->
<!--          </el-date-picker>-->
          <el-button style="margin-left: 10px" ref="searchbutton" type="primary" @click="search" icon="el-icon-search">查询</el-button>
          <el-button style="margin-left: 10px" type="success" @click="handleqrBatch" icon="el-icon-thumb">确认</el-button>
<!--          <el-button style="margin-left: 10px" type="warning" @click="showCZFormBatch" icon="el-icon-thumb">处置</el-button>-->
<!--        </div>-->

      </div>
    </div>
    <el-dialog title="报警处置" :visible.sync="dialogFormVisible">
      <el-form :model="czform">
        <el-form-item label="处置内容" :label-width="formLabelWidth">
          <el-input   type="textarea"
                      :rows="2"
                      v-model="czform.text"
                      autocomplete="off">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlecz(czform.id)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="批量报警处置" :visible.sync="czFormBatchVisible">
      <el-form :model="czform">
        <el-form-item label="处置内容" :label-width="formLabelWidth">
          <el-input   type="textarea"
                      :rows="2"
                      v-model="czform.text"
                      autocomplete="off">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="czFormBatchVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleczBatch">确 定</el-button>
      </div>
    </el-dialog>
    <div style="overflow: scroll;  width: 1600px; height: 300px">
      <el-table ref="table" @selection-change="handleSelectionChange" :data="tableData"
                style="margin: 10px; width: 1600px" border stripe>
        <el-table-column width="50" type="selection">
        </el-table-column>
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="60" v-if="false">
        </el-table-column>
        <el-table-column prop="dwObj.dwname" label="单位" width="100">
        </el-table-column>
        <el-table-column prop="bjd" label="报警点" width="100">
        </el-table-column>
        <el-table-column prop="lx" label="报警类型" width="150">
        </el-table-column>
        <el-table-column prop="bjsj" label="报警时间" width="200">
        </el-table-column>
        <el-table-column prop="msxx" label="报警描述" width="750">
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-popconfirm
                style="margin: 0 10px"
                confirm-button-text='确定'
                cancel-button-text='取消'
                icon="el-icon-info"
                icon-color="red"
                title="确认报警？"
                @confirm="handleqr(scope.row.id)"
            >
              <el-button type="success" size="mini" slot="reference">确认</el-button>
            </el-popconfirm>
<!--            <el-button style="margin-left: 10px" size="mini" type="warning" @click="showCZForm(scope.row.id)" icon="el-icon-thumb">处置</el-button>-->
          </template>
        </el-table-column>
  <!--      <el-table-column prop="clr" label="确认人" width="150">-->
  <!--      </el-table-column>-->
  <!--      <el-table-column prop="qrsj" label="确认时间" width="150">-->
  <!--      </el-table-column>-->
  <!--      <el-table-column prop="clxx" label="处理信息" width="">-->
  <!--      </el-table-column>-->
      </el-table>

    </div>
    <div class="block" style="padding: 5px; margin-bottom: 50px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100,500,1000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>




    <div style="float: left; margin-bottom: 15px">
      报警点 <el-input style="width: 200px; margin: 0 10px 0 10px" placeholder="报警点" suffix-icon="el-icon-search"
                       v-model="czbjd"/>
    </div>
    <el-button style="margin-left: 10px" type="primary" @click="getcz" icon="el-icon-search">查询</el-button>
<!--    <el-button style="margin-left: 10px" type="warning" @click="showCZFormBatch" icon="el-icon-thumb">处置</el-button>-->
    <div style="overflow: scroll; width: 1600px; height: 300px">
      <el-table ref="table" @selection-change="" :data="cztableData"
                style="margin: 10px; width: 1600px" border stripe>
<!--        <el-table-column width="50" type="selection">-->
<!--        </el-table-column>-->
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="60" v-if="false">
        </el-table-column>
        <el-table-column prop="dwObj.dwname" label="单位" width="100">
        </el-table-column>
        <el-table-column prop="bjd" label="报警点" width="100">
        </el-table-column>
        <el-table-column prop="lx" label="报警类型" width="150">
        </el-table-column>
        <el-table-column prop="bjsj" label="报警时间" width="200">
        </el-table-column>
        <el-table-column prop="msxx" label="报警描述" width="750">
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">

            <el-button style="margin-left: 10px" size="mini" type="warning" @click="showCZForm(scope.row.id)" icon="el-icon-thumb">处置</el-button>
          </template>
        </el-table-column>
        <!--      <el-table-column prop="clr" label="确认人" width="150">-->
        <!--      </el-table-column>-->
        <!--      <el-table-column prop="qrsj" label="确认时间" width="150">-->
        <!--      </el-table-column>-->
        <!--      <el-table-column prop="clxx" label="处理信息" width="">-->
        <!--      </el-table-column>-->
      </el-table>

    </div>
    <div class="block" style="padding: 5px">
      <el-pagination
          @size-change="handleczSizeChange"
          @current-change="handleczCurrentChange"
          :current-page="czcurrentPage"
          :page-sizes="[10, 20, 50, 100,500,1000]"
          :page-size="czpageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="cztotal">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

import VueRouter from 'vue-router'
import HomeView from "@/views/HomeView.vue";
import {formatDateTime} from "@/utils/formatDateTime";


export default {

  created() {
    service.get('/dw/getAll', {}).then(
        response => {
          if (response.data.code == 20000) {
            this.dwoptions = response.data.data
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7 );
            let starttime = formatDateTime(start, "yyyy-MM-dd HH:mm:ss")
            let endtime = formatDateTime(end, "yyyy-MM-dd HH:mm:ss")
            this.datearr=[starttime,endtime]
            this.load();
            this.getNewtimer = setInterval(this.getnew, 60000)
          }
        }
    )
  },
  destroyed() {
    clearInterval(this.getNewtimer)
  },
  data() {
    return {
      dwoptions: [],
      dwid: null,
      dwval: [],
      bjd: null,
      bjlx: null,
      msxx: null,
      datearr: [],
      pickerOptions: {
        shortcuts: [ {
          text: '最近一天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 );
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      tableData: [],
      pageSize: 10,
      total: 100,
      currentPage: 1,
      selectedRows: [],

      czbjd: null,
      cztableData: [],
      czpageSize: 10,
      cztotal: 100,
      czcurrentPage: 1,
      czselectedRows: [],

      czform:{
        id: null,
        text: ''
      },
      formLabelWidth: '150px',
      dialogFormVisible: false,
      czFormBatchVisible: false,
      alarmInterval: null,
      getNewtimer: null
    }
  },
  watch: {
    tableData: function (newVal, oldVal) {
      if(newVal != null && newVal.length > 0){
        this.startAlarm()
      }else {
        this.stopAlarm()
      }
    }
  },
  methods: {
    playAlarm() {
      // console.log('sdsds')
      const audio = this.$refs.audio
      if (audio) {
        audio.currentTime = 0
        audio.play().catch(e => console.error('播放失败', e))
      }
    },
    startAlarm() {
      if (!this.alarmInterval) {
        this.playAlarm()
        this.alarmInterval = setInterval(this.playAlarm, 3000)
      }
    },
    stopAlarm() {
      if (this.alarmInterval) {
        clearInterval(this.alarmInterval)
        this.alarmInterval = null
      }
      const audio = this.$refs.audio
      if (audio) {
        audio.pause()
        audio.currentTime = 0
      }
    },
    getnew(){
      this.$refs.searchbutton.loading = true
      service.get('/bj/getnewpage', {
        params: {
          pagesize: this.pageSize,
          pagenum: this.currentPage,
          dw: this.dwid,
          bjd: this.bjd,
          bjlx: this.bjlx,
          msxx: this.msxx,
          // startdate: this.datearr[0],
          // enddate: this.datearr[1]
        }
      }).then(response => {
            this.$refs.searchbutton.loading = false
            if (response.data.code == 20000) {
              this.tableData = response.data.data.records;
              this.total = response.data.data.total;
              this.currentPage = response.data.data.current;
              this.pageSize = response.data.data.size;
            }
          },
          error => {
            this.$refs.searchbutton.loading = false
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );

    },
    getcz(){
      service.get('/bj/getczpage', {
        params: {
          pagesize: this.czpageSize,
          pagenum: this.czcurrentPage,
          bjd: this.czbjd
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.cztableData = response.data.data.records;
              this.cztotal = response.data.data.total;
              this.czcurrentPage = response.data.data.current;
              this.czpageSize = response.data.data.size;
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );

    },
    load() {
      this.getnew();
      this.getcz();
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },

    handleczCurrentChange(val) {
      this.czcurrentPage = val
      this.getcz()
    },
    handleczSizeChange(val) {
      this.czpageSize = val
      this.getcz()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },

    search() {
      // this.currentPage = 1
      this.getnew()
    }
    ,

    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    handleqr(id) {
      service.get('/bj/qr', {
        params: {
          id: id
        }
      }).then(response => {
            if (response.data.code == 20000) {
              ElementUI.Message({
                message: response.data.message,
                type: 'success'
              })
              this.load()
            }else {
              ElementUI.Message({
                message: response.data.message,
                type: 'error'
              })
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
            })
          }
      )
    },
    showCZForm(id) {
      this.czform.text = ''
      this.czform.id = id
      this.dialogFormVisible = true
    },
    showCZFormBatch(){
      this.czFormBatchVisible = true
    },
    handlecz(){
        service.post('/bj/cz', this.czform).then(response => {
          if (response.data.code == 20000) {
            this.dialogFormVisible = false
            ElementUI.Message({
              type: 'success',
              message: response.data.message,
            })
            this.getcz()
          }
        })
    },
    handleqrBatch(){
      for(let i=0;i<this.selectedRows.length;i++){
        this.handleqr(this.selectedRows[i].id)
      }
    },
    handleczBatch(){
      for(let i=0;i<this.selectedRows.length;i++){
        this.czform.id = this.selectedRows[i].id
        this.handlecz()
      }
    },
  },

}
</script>

<style scoped>

</style>
